<template>

  <div class="pduPeople">
    <div class="headerPart">
      <h1>业务数据-份额占比</h1>
    </div>

    <div class="mainPart">
      <van-field
        readonly
        clickable
        label="部门"
        :value="deptName"
        placeholder="请选择部门"
        @click="showPicker = true"
      />
      <van-popup v-model="showPicker" position="bottom">
        <van-picker
          :loading="loading"
          show-toolbar
          :columns="sourceColumns"
          value-key="deptName"
          @cancel="showPicker = false"
          @confirm="onConfirm"
          @change="onChange"
        />
      </van-popup>

      <div class="chartPart">
        <canvas id="myChart" width="400" height="300"></canvas>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast, Picker, Popup, Field, Loading } from 'vant'
import F2 from '@antv/f2/lib/index-all'

const initDeptId = '1164519145686429698'
const defaultDept = [{ 'deptId': initDeptId, 'deptName': '全部' }]

export default {
  components: {
    [Toast.name]: Toast,
    [Picker.name]: Picker,
    [Popup.name]: Popup,
    [Field.name]: Field,
    [Loading.name]: Loading
  },

  data () {
    return {
      loading: false,
      deptId: '',
      deptName: '',
      showPicker: false,
      sourceColumns: [
        {
          values: defaultDept,
          className: 'column1'
        }, {
          values: defaultDept,
          className: 'column2'
        }, {
          values: defaultDept,
          className: 'column3'
        }
      ],
      chart: {},
      chartData: []
    }
  },

  methods: {
    onConfirm (value) {
      this.deptId = value[value.length - 1].deptId
      this.deptName = Array.from(value, (record) => { return record.deptName }).join(' / ')
      this.showPicker = false

      this.$axios({url: 'pdu/people/getNums', method: 'post', data: {'deptId': this.deptId}})
      .then((resp) => {
        this.chart.changeData(resp.data)
      })
    },

    onChange (picker, value, index) {
      if (index === 2) {
        return
      }

      this.loading = true
      this.$axios({url: 'dept/getPageList', method: 'post', data: {'parentId': value[index].deptId}})
      .then((resp) => {
        const copyDefaultDept = defaultDept
        copyDefaultDept[0].deptId = value[index].deptId
        picker.setColumnValues(index + 1, copyDefaultDept.concat(resp.data.records))

        if (value[index].deptName === '全部') {
          do {
            picker.setColumnValues(index + 1, copyDefaultDept)
            index++
          } while (index < 3)
        }
        this.loading = false
      })
    }
  },

  mounted () {
    this.$axios({url: 'dept/getPageList', method: 'post', data: {'parentId': initDeptId}})
    .then((resp) => {
      this.sourceColumns[0].values = defaultDept.concat(resp.data.records)
    })

    this.$axios({url: 'pdu/people/getNums', method: 'post', data: {'deptId': initDeptId}})
    .then((resp) => {
      console.log(resp.data)
      this.chartData = resp.data

      this.chart = new F2.Chart({
        id: 'myChart',
        pixelRatio: window.devicePixelRatio
      })
      this.chart.source(resp.data)
      this.chart.coord('polar', {
        transposed: true,
        radius: 0.9,
        innerRadius: 0.5
      })
      this.chart.axis(false)
      this.chart.legend(false)
      this.chart.tooltip(false)
      this.chart.guide().html({
        position: ['50%', '50%'],
        html: '<div style="text-align: center;width:150px;height: 50px;">\n      <p style="font-size: 12px;color: #999;margin: 0" id="title"></p>\n      <p style="font-size: 18px;color: #343434;margin: 0;font-weight: bold;" id="money"></p>\n      </div>'
      })
      this.chart
        .interval()
        .position('const*nums')
        .adjust('stack')
        .color('supplyName', ['#1890FF', '#13C2C2', '#2FC25B', '#FACC14', '#F04864', '#8543E0'])
      this.chart.pieLabel({
        sidePadding: 20,
        inflectionOffset: 40,
        activeShape: true,
        label1: function label1 (data) {
          return {
            text: data.supplyName + ' ' + data.percent + '%',
            fill: '#343434',
            fontWeight: 'bold'
          }
        },
        label2: function label2 (data) {
          return {
            fill: '#000000',
            text: data.nums,
            fontWeight: 500,
            fontSize: 10
          }
        },
        onClick: function onClick (ev) {
          var data = ev.data
          if (data) {
            document.getElementById('title').innerText = data.supplyName
            document.getElementById('money').innerText = data.nums
          }
        }
      })
      this.chart.render()
    })
  },

  watch: {
    deptId: (deptId) => {
    }
  }
}
</script>

<style lang="scss" rel="stylesheet/scss">
  .pduPeople {

    .headerPart {
      padding: 10px
    }

    .mainPart {
      padding: 10px
    }

    .chartPart {
    }

    #myChart {
    }
  }
</style>